<template>
  <div class>
    <nly-container :fluid="true">
      <nly-breadcrumb>
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-home-fill"
          to="/"
          text="首页"
        />
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-outlet"
          to="/food"
          active
          text="用户管理"
        />
      </nly-breadcrumb>
      <section class="content">
        <div class="flex">
          <i-col :md="6" :sm="12">
            <Input
              v-model="searchText"
              search
              placeholder="根据昵称查询 "
              enter-button="搜索"
              @on-search="search(searchText)"
            />
          </i-col>
        </div>
        <br />
        <Table border :columns="header" :data="accountList">
          <template slot-scope="{ row }" slot="avatar">
            <img
              :src="row.avatar"
              class="avatar"
            
            />
          </template>
          <template slot-scope="{ row }" slot="sex">{{
            row.sex == 0 ? "暂无" : row.sex == 1 ? "男" : "女"
          }}</template>
          <template slot-scope="{ row }" slot="balance">{{
              row.balance == 0 ? "暂无余额" : row.balance
            }}</template>
          <template slot-scope="{ row }" slot="member">{{
              row.member == 0 ? "否" : "是"
            }}</template>
          <template slot-scope="{ row }" slot="action">
            <Button
                type="success"
                size="small"
                @click="selectUserAward(row.id)"
            >陈列柜</Button>
            <Button
                style="margin-left: 16px"
                type="success"
                size="small"
                @click="getUserCuppon(row.id)"
            >优惠券</Button>
            <Button
                style="margin-left: 16px"
                type="success"
                size="small"
                @click="addCuppon(row.id)"
            >发放优惠券</Button>
          </template>
        </Table>
        <br />
        <div class="Page">
          <Page
            :total="userTotal"
            show-elevator
            show-total
            :page-size="data.pageSize"
            :current="data.pageNo"
            @on-change="changePage"
          />
        </div>
      </section>
      <Modal
        title="修改用户等级"
        :styles="{ width: '30%' }"
        v-model="modalText"
        class-name="vertical-center-modal"
        :footer-hide="true"
      >
        <div>
          <Form ref="data" :model="datas" :label-width="100">
            <FormItem label="用户等级" prop="level">
              <Input v-model="datas.level" placeholder="请输入用户等级" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="AddText('data')">提交</Button>
              <Button @click="modalTextcal()" style="margin-left: 8px"
                >取消</Button
              >
            </FormItem>
          </Form>
        </div>
      </Modal>

      <Modal
          title="发放优惠券"
          :styles="{ width: '30%' }"
          v-model="modalCuppon"
          class-name="vertical-center-modal"
          :footer-hide="true"
      >
        <div>
          <Form ref="data" :model="datas" :label-width="100">
            <FormItem label="优惠卷" prop="discountsId">
              <Select
                  v-model="datas.discountsId"
                  style="width: 200px"
                  placeholder="请选择优惠卷"
              >
                <Option
                    v-for="(item, index) in discount"
                    :value="item.id"
                    :key="index"
                >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="addUserCuppon('data')">提交</Button>
              <Button @click="modalTextcal()" style="margin-left: 8px"
              >取消</Button
              >
            </FormItem>
          </Form>
        </div>
      </Modal>
      <Modal
        title="重置密码"
        :styles="{ width: '30%' }"
        v-model="modalAddTextpass"
        class-name="vertical-center-modal"
        :footer-hide="true"
      >
        <div>
          <Form ref="data" :model="datatwo" :label-width="100">
            <FormItem label="重置密码" prop="password">
              <Input v-model="datatwo.password" placeholder="请输入重置密码" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="AddTexttwo('datatwo')"
                >提交</Button
              >
              <Button @click="modalAddTextpasscal()" style="margin-left: 8px"
                >取消</Button
              >
            </FormItem>
          </Form>
        </div>
      </Modal>
      <Modal
        title="修改团队人数"
        :styles="{ width: '30%' }"
        v-model="modalAddTextthree"
        class-name="vertical-center-modal"
        :footer-hide="true"
      >
        <div>
          <Form ref="data" :model="datafour" :label-width="100">
            <div style="margin-bottom: 20px">
              <span
                style="color: #2d8cf0; margin-right: 16px; margin-left: 40px"
                >是否展示团队真实人数</span
              >
              <i-switch
                size="large"
                :true-value="0"
                :false-value="1"
                v-model="switch1"
                @on-change="change"
              >
              </i-switch>
            </div>
            <FormItem label="团队人数" prop="level">
              <Input
                v-model="datafour.teamNumber"
                placeholder="请输入团队人数"
              />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="AddTextfour('datafour')"
                >提交</Button
              >
              <Button @click="modalAddTextpasscal1()" style="margin-left: 8px"
                >取消</Button
              >
            </FormItem>
          </Form>
        </div>
      </Modal>
    </nly-container>
  </div>
</template>
<script>
import apis from "@/api/account";
import apis2 from "@/api/shop1";
export default {
  data() {
    return {
      modalAddText: false,
      modalAddTextpass: false,
      modalAddTextthree: false,
      modalCuppon: false,
      searchText: "",
      discount: [],
      total: 0,
      userTotal: 0,
      switch1: 0,
      data2: {
        page: 1, //当前页
        pageSize: 1000000, //每页显示个数
        type: 0,
      },
      data: {
        page: 1, 
        pageSize: 10,
        nickName: "",
      },
      datas: {
        code: "",
        discountsId: "",
        id: "",
      },
      datatwo: {
        id: "",
        password: "",
      },
      datafour: {
        id: "",
        teamNumber: "",
      },
      modalText: false,
      header: [
        {
          title: "昵称",
          key: "nickName",
          align: "center",
        },
        {
          title: "头像",
          slot: "avatar",
          key: "avatar",
          align: "center",
        },
        {
          title: "性别",
          slot: "sex",
          key: "sex",
          align: "center",
        },
        {
          title: "余额",
          slot: "balance",
          key: "balance",
          align: "center",
        },
        {
          title: "会员",
          slot: "member",
          key: "member",
          align: "center",
        },
        {
          title: "注册时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          width: 440,
          align: "center",
        },
      ],
      accountList: [],
      pageSize: 10,

      key: "",
    };
  },
  mounted() {
    let that = this;
    that.getcupponlist();
    that.getUserinfo();
  },
  methods: {

    getcupponlist() {
      let that = this;
      apis2.getcupponlist(this.data2).then((response) => {
        let resdata = response.data;
        if (resdata.code === 0) {
          console.log(response.data);
          that.discount = resdata.data.list;
          console.log("当前用户的总量是"+resdata.data.total);
          that.total = resdata.data.total;
        }
      });
    },

    addCuppon(id) {
      this.datas.id = id
      this.modalCuppon = true
    },

    selectUserAward(id) {
      this.$router.push({
        path: "/order/userclassorder",
        query: {
          id: id
        }
      });
    },
    getUserCuppon(id) {
      this.$router.push({
        path: "/shop/userCuppon",
        query: {
          id: id
        }
      });
    },
    change_upNew(id, val) {
      let data = {
        id: id,
        blacklist: val,
      };
      apis
        .upaccount(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
            this.getUserinfo()
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    
    lookteamnum(row) {
      apis
        .lookteamnum({
          userId: row.id,
        })
        .then((response) => {
          if (response.data.code == 0) {
            var teannum = 0;
            for (var i = 0; i < response.data.data.length; i++) {
              teannum += response.data.data[i].value;
            }
            this.datafour.teamNumber = teannum;
          } else {
            this.$Message.error("请求错误");
          }
        });
    },
    looktteamstate(row) {
      console.log(row);
      apis
        .looktruenum({
          userId: row.id,
        })
        .then((response) => {
          console.log(this.datafour);
          if (response.data.code == 0) {
            if (response.data.data == 0) {
              this.switch1 = 0;
              this.lookteamnum(this.datafour);
            } else if (response.data.data == 1) {
              this.switch1 = 1;
              this.datafour.teamNumber = row.teamNumber;
            }
          }
        });
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.nickName = val;
      console.log(val);
      this.getUserinfo();
    },

    create(row) {
      console.log(row);
      this.modalText = true;
      (this.datas.level = row.level), (this.datas.id = row.id);
    },
    createtwo(row) {
      console.log(row);
      this.modalAddTextpass = true;
      this.datatwo.id = row.id;
    },
    createthree(row) {
      console.log(row);
      this.modalAddTextthree = true;
      this.datafour.id = row.id;
      this.datafour.teamNumber = row.teamNumber;
      this.looktteamstate(row);
    },
    change(val) {
      console.log(val);
      apis
        .change_teamstatus({
          isTrue: val,
          id: this.datafour.id,
        })
        .then((response) => {
          if (response.data.code == 0) {
            this.lookteamnum(this.datafour);
            this.$Message.success("改修成功");
          } else {
            this.$Message.error("请求错误");
          }
        });
    },
    modalTextcal() {
      this.modalText = false;
      this.modalCuppon = false;
    },
    modalAddTextpasscal() {
      this.modalAddTextpass = false;
    },
    modalAddTextpasscal1() {
      this.modalAddTextthree = false;
    },
    AddTexttwo() {
      let data = this.datatwo;
      console.log(data);
      apis.changepassword(data).then((response) => {
        if (response.data.code == 0) {
          this.modalAddTextpass = false;
          this.$Message.success("修改成功");
          this.datas.password = "";
          this.datas.id = "";
          this.$refs.data.resetFields();
          this.getUserinfo();
        } else {
          this.datatwo.password = "";
          this.$Message.error("修改失败");
        }
      });
    },
    AddTextfour() {
      let data = this.datafour;
      console.log(data);
      apis.changeteamnum(data).then((response) => {
        if (response.data.code == 0) {
          this.modalAddTextthree = false;
          this.$Message.success("修改成功");
          this.datafour.teamNumber = "";
          this.datafour.id = "";
          this.$refs.data.resetFields();
          this.getUserinfo();
        } else {
          this.datafour.teamNumber = "";
          this.$Message.error("修改失败");
        }
      });
    },
    AddText(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = this.datas;
          console.log(data);
          apis.changeleval(data).then((response) => {
            if (response.data.code == 0) {
              this.modalText = false;
              this.$Message.success("修改成功");
              this.datas.level = "";
              this.datas.id = "";
              this.$refs.data.resetFields();
              this.getUserinfo();
            } else {
              this.$Message.error("修改失败");
            }
          });
        } else {
          this.modalText = false;
          this.$Message.error("Fail!");
          this.$refs.data.resetFields();
        }
      });
    },

    addUserCuppon() {
      let data = this.datas;
      console.log(data);
      apis.sendDiscountToAccount(data).then((response) => {
        if (response.data.code === 0) {
          this.modalCuppon = false;
          this.$Message.success("发放成功");
          this.datafour.teamNumber = "";
          this.datafour.id = "";
          this.$refs.data.resetFields();
          this.getUserinfo();
        } else {
          this.$Message.error("发放失败");
        }
      });
    },
    remove(id) {
      console.log(id);
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除此此用户？删除后无法恢复`,
        onOk: () => {
          apis
            .deleteUser({
              userId: id,
            })
            .then((response) => {
              console.log(response);
              if (response.data.code == 0) {
                this.getUserinfo();
                this.$Message.success("删除成功");
              } else {
                this.$Message.error("删除失败");
              }
            })
            .catch((error) => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        },
        onCancel: () => {},
      });
    },
    getUserinfo() {
      let that = this;
      apis.getAllUser(this.data).then((response) => {
        console.log(response);
        let resdata = response.data.data;

        console.log(response.data);
        that.accountList = resdata.list;
        that.userTotal = resdata.total;
      });
    },
    changePage(pageNo) {
      this.data.page = pageNo;
      this.getUserinfo();
    },
    search_account(val) {
      this.data.pageNo = 1;
      let data = this.data;
      data.u_name = val;
      this.getUserinfo();
    },
  },
};
</script>

<style scoped>
.padding20 {
  margin: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}

.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
</style>